<script setup lang="ts">
import { computed, reactive, ref, defineExpose } from "vue";
import goodsIcon from "./goodsIcon.vue";
const props = defineProps(["goodsData"]);
const deliveryFilter = computed(() => {
  return (delivery) => {
    if (delivery === 0) {
      return "包邮";
    } else if (delivery === 1) {
      return "不包邮";
    } else {
      return "自取";
    }
  };
});
const goodsCheckSelect = ref(false);
const appCommodityList = ref([]);
const goodsCheckId = ref();
const goodsCheck = (data: any) => {
  goodsCheckId.value = data.id;
  if (!goodsCheckSelect.value) {
    goodsCheckSelect.value = true;
    // appCommodityList.value.push(data.id)
  } else {
    // const index = appCommodityList.value.indexOf(data.id);
    // appCommodityList.value.splice(index,1)
    goodsCheckSelect.value = false;
  }
};
const isImg = (url = "") => {
  if (
    url.indexOf(".png") > -1 ||
    url.indexOf(".jpg") > -1 ||
    url.indexOf(".jpeg") > -1 ||
    url.indexOf(".webp") > -1
  ) {
    return true;
  }
  return false;
};
const getUrl = (src) => {
  if (isImg(src)) {
    return src;
  }

  return src + "?x-oss-process=video/snapshot,t_0,f_jpg";
};
defineExpose({
  goodsCheckSelect,
  goodsCheckId,
  goodsCheck,
});
</script>
<template>
  <view class="flex flex-column l-card">
    <view
      class="goods-check"
      :class="!goodsCheckSelect ? 'goods-check' : 'activecheck'"
      @click="goodsCheck(goodsData)"
    >
      <uv-icon name="checkmark" color="#fff" size="14"></uv-icon>
    </view>
    <!-- <goodsIcon class="goods-icon" v-if="goodsData.state == 2" type="primary" text="在售"></goodsIcon>
        <goodsIcon class="goods-icon" v-else-if="goodsData.state == 3" type="black" text="已售出"></goodsIcon>
        <goodsIcon class="goods-icon" v-else-if="goodsData.state == 4" type="warnning" text="已下架"></goodsIcon> -->
    <view>
      <image :src="getUrl(goodsData.images[0])" mode="widthFix" />
    </view>
    <view class="flex flex-column goods-info">
      <view class="goods-intro flex">
        <view>
          <text class="delivery-method">{{
            deliveryFilter(goodsData.delivery)
          }}</text>
          <text class="line-col">|</text>
          <text class="goods-desc">{{ goodsData.title }}</text>
        </view>
      </view>
      <view class="goods-price flex flex-align-center">
        <view class="pay-price">
          <text class="cny">￥</text
          ><text class="price">{{ goodsData.currentPrice }}</text>
        </view>
      </view>
      <view class="user flex flex-align-center">
        <image
          :src="
            goodsData.headSculpture === null
              ? '../../static/images/avatar_default.png'
              : goodsData.headSculpture
          "
        />
        <text class="nickname">{{ goodsData.shopName }}</text>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.goods-icon {
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  top: 20rpx;
  right: 20rpx;
}
.goods-check {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  background: #fff;
  border: 1px solid #cecece;
}
.activecheck {
  background: #328cfe;
}
.l-card {
  padding: 0 0 20rpx 0;
  // border-radius: ;
  // border-radius: 10px 10px 0px 0px;
  // margin-bottom: 27rpx;
  margin: 15rpx 0;
  height: auto;
  position: relative;

  image {
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 0px 0px;
  }
}

.goods-info {
  padding: 5rpx 10rpx 0 10rpx;
}

.goods-intro {
  // padding: 5rpx 10rpx 0 10rpx;
  font-size: 24rpx;
  font-weight: bold;

  .delivery-method {
    color: #328cfe;
  }

  .goods-desc {
    color: #4f4f4f;
    font-weight: 900;
  }
}

.goods-price {
  margin-top: 10rpx;
  font-weight: 500;

  .pay-price {
    margin-right: 40rpx;
    font-size: 26rpx;
    color: #f3604e;

    .price {
      font-size: 32rpx;
    }
  }

  .origin-price {
    color: #cecece;
    // font-size: 22rpx;
    font-size: 24rpx;

    text-decoration: line-through;

    .cny {
      font-size: 22rpx;
    }
  }
}

.user {
  margin-top: 10rpx;

  image {
    width: 34rpx;
    height: 34rpx;
    margin-right: 15rpx;
    margin-top: 2px;
    border-radius: 50%;
  }

  .nickname {
    color: #4f4f4f;
    font-size: 24rpx;
    font-weight: 600;
  }
}

.intro {
  font-size: 24rpx;
  font-weight: bold;
}

.line-col {
  padding: 0 5rpx;
  width: 2px;
  color: #cecece;
}
</style>
